<template>
  <div style="margin-left:0px;margin-right:20px;margin-top:20px;margin-bottom:20px;">

    <el-form :model="phaseData" label-width="160px" size="small" :inline="true" class="demo-form-inline">
      <el-row :gutter="28">
        <div class="clearfix1">
          <el-col :xs="24" :sm="14" :md="14" :lg="6" :xl="6">
            <el-form-item :label="$t('common.start_delay')" class="inputPadding">
              <el-input type="number" v-model="phaseData.delayTime">
                <template slot="append">min</template>
              </el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="2" :offset="1">
          <el-form-item label="">
            <el-checkbox v-model="phaseData.isActive">{{$t('common.enable')}}</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-divider></el-divider>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleForm" :rules="rules" label-width="160px" size="small">
      <el-row :gutter="28">
        <div class="clearfix1">
          <template v-for="(el,key) in formData">
            <el-col :xs="24" :sm="14" :md="14" :lg="colWidth" :xl="colWidth" :key="key">
              <el-form-item :label="el.name" :prop="el.prop">

                <el-input v-model="formInline[el.prop]" :placeholder="$t('common.please_input')" v-if="el.type == 'input'" v-enterNumber2>
                  <span slot="suffix" class="unit">{{el.unit}}</span>
                </el-input>

                <el-input v-model="formInline[el.prop]" :placeholder="$t('common.please_input')" v-else-if="el.type == 'inputStr'"
                  :disabled="el.disabled">
                  <span slot="suffix" class="unit">{{el.unit}}</span>
                </el-input>
                <el-input v-model="formInline[el.prop]" :placeholder="$t('common.please_input')" v-else-if="el.type == 'inputZs'"
                  v-enterNumber :disabled="el.disabled">
                  <span slot="suffix" class="unit">{{el.unit}}</span>
                </el-input>

                <el-select v-model="formInline[el.prop]" :placeholder="$t('common.please_sel')" v-else-if="el.type == 'select'">
                  <el-option v-for="(ele,ids) in selectOptions[el.enumGroupId]" :key="ids" :label="ele.enumsDesc"
                    :value="ele.enumsValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </div>
      </el-row>
    </el-form>
    <el-divider></el-divider>

    <el-form :model="phaseData" label-width="160px" size="small">
      <el-row :gutter="28">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label-width="0">
            <p style="font-weight: bold">{{$t('recipe.phase_info')}}</p>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="24">
          <el-form-item :label="$t('common.operating_instructions')">
            <el-input rows="3" type="textarea" v-model="phaseData.guideInfo" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="28">
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="24">
          <el-form-item :label="$t('basic.remarks')">
            <el-input rows="3" type="textarea" v-model="phaseData.flastModifyComment" placeholder="" clearable
              @change="forceUpdate()"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import { formula } from "@/api/formula";
import { configure } from "@/api/configure"

export default {
  props: {
    stepObj: Object,
    recipeInfo: Object,
    phaseDefineId: String,
    setColuWidth: String,
    enumList: Array,
  },
  data () {

    return {
      formData: [],
      loading: false,
      formInline: {},
      phaseData: {
        delayTime: "0",
        isActive: 1,
        guideInfo: '',
        flastModifyComment: '',
      },
      title: "添加",
      rowList: [],
      loadingDia: '',
      rules: {},
      colWidth: 6,
      selectOptions: {
      },

    }
  },
  created () {

  },
  watch: {
    stepObj (val) {
      if (val) {
        this.colWidth = parseInt(this.setColuWidth)
        this.getPhaseArgu()
        this.phaseAutoList()

        Object.assign(this.phaseData, this.stepObj)
        this.phaseData.isActive = this.phaseData.isActive == 1 ? true : false
      }
    },
  },
  mounted () {
    if (this.stepObj != undefined) {
      this.colWidth = parseInt(this.setColuWidth)
      this.getPhaseArgu()
      this.phaseAutoList()

      Object.assign(this.phaseData, this.stepObj)

      this.phaseData.isActive = this.phaseData.isActive == 1 ? true : false
    }
  },
  methods: {
    getPhaseArgu () {

      const param = {
        'phaseId': this.phaseDefineId,
        field: 'orderBy',
        order: 'ASC',
        page: 1,
        size: 999,
      }

      configure.getPhaseTagDefineList(param).then(res => {
        this.formData = []
        this.formInline = {}
        res.data.rows.forEach(ii => {
          let temp = {}
          if (ii.type == 4) {

            let enumArr = this.enumList.filter(item => item.enumsGrpId == ii.enumGroupId)
            this.selectOptions[ii.enumGroupId] = enumArr
            temp.type = 'select'
          } else if (ii.type == 1) {
            temp.type = 'inputZs'
          } else if (ii.type == 2) {
            temp.type = 'inputStr'
          } else if (ii.type == 0) {
            temp.type = 'input'
          }
          temp.dataType = ii.type
          temp.span = 6
          temp.unit = ii.uom
          temp.prop = ii.name
          temp.enumGroupId = ii.enumGroupId
          temp.disable = false
          temp.name = ii.name
          this.formData.push(temp)
          this.$set(this.formInline, ii.name, '');
        })

      })
    },

    phaseAutoList () {
      const param = {
        phaseId: this.stepObj.fid,
        page: 1,
        size: 999999
      }
      formula.phaseAutoList(param).then(res => {
        if (res.code == 200) {
          if (res.data.rows.length > 0) {
            this.title = "编辑"
            this.rowList = res.data.rows

            res.data.rows.forEach(item => {

              if (isNaN(item.target) || item.target == '') {
                this.$set(this.formInline, item.paraName, item.target)
              } else {
                if (item.target.indexOf('.') > -1) {
                  this.$set(this.formInline, item.paraName, parseFloat(item.target))
                } else {
                  this.$set(this.formInline, item.paraName, parseInt(item.target))
                }
              }
            });

          } else {
            this.title = "添加"
          }
        }
      })
    },
    savePhaseData (formName) {
      this.$refs[formName].validate((valid) => {

        if (valid) {
          const param = { ...this.phaseData }
          param.fLastModifyTime = ''

          param.isActive = this.phaseData.isActive ? 1 : 0
          formula.phaseAdd(param).then(res => {

          })
        }
      })
    },

    handleSubmit (formName) {
      this.savePhaseData(formName)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formInline = Object.assign({}, this.formInline)

          const param = [];
          let ii = 0
          for (let key in formInline) {
            if (key == 'isEnable') {
              formInline[key] = formInline[key] ? 0 : 1
            }

            let temp = this.formData.find(ii => ii.name == key)
            param.push(
              {
                paraName: key,
                target: (!isNaN(parseFloat(formInline[key]))) ? parseFloat(formInline[key]) : formInline[key],
                phaseId: this.stepObj.fid,
                fid: this.rowList.length == 0 || this.rowList[ii] == undefined ? '' : this.rowList[ii].fid,
                type: temp.dataType,
                uom: temp.unit,
                enumGroupId: temp.enumGroupId,
              }

            );
            ii++
          }
          this.$emit('sendAuto', param)

        } else {
          return false;
        }
      });

    },
  },
  destroyed () {
  }
}
</script>

<style scoped>
.title {
  padding-left: 25px;
  line-height: 35px;
  font-weight: bold;
}
.title2 {
  padding-left: 25px;
  line-height: 25px;
  font-weight: bold;
  font-size: 14px;
}
.demo-form-inline >>> .el-form-item {
  display: flex;
}
.demo-form-inline >>> .el-form-item__content {
  flex: 1;
}
.demo-form-inline >>> .el-divider--horizontal {
  margin: 10px 0;
}
.unit-form-inline >>> .el-input__suffix {
  right: 0px;
}
.createRecTable >>> .el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.unit {
  font-size: 12px;
  color: #333;
}

.clearfix1 {
  /* border: 1px solid #333; */
}
</style>